<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="utf-8">
        <title>{% block title %}{% endblock %} | PopJob</title>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.4/js/tether.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/esm/popper.js" integrity="sha256-4kUPBlS1Fr7qjbWYehJl75RSmOSTnmVgJfwxgoQG8Oo=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">

        <!-- <script src="js/chosen.jquery.min.js"></script> -->
            <!-- <script  src="{{ url_for('static', filename='js/chosen.jquery.min.js') }}"></script> -->

<!-- <link rel="stylesheet" href="{{ url_for('static', filename='css/component-chosen.min.css') }}"> -->
<!-- <script src="{{ url_for('static', filename='js/chosen.jquery.min.js') }}"></script> -->
<!-- <script src="static/js/chosen.jquery.min.js"></script>  -->
<!-- <script src="https://harvesthq.github.io/chosen/chosen.jquery.js" type="text/javascript"></script> -->
<link rel="stylesheet" type="text/css" href="https://www.jqueryscript.net/demo/Bootstrap-4-Chosen-Plugin/dist/css/component-chosen.css">


        <script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
        <style type="text/css">
            body { padding-top: 80px; }
        </style>

        {% block extra_styles %}{% endblock %} {% block extra_scripts %}{% endblock %}
            <!-- <link href="{{ url_for('static', filename='css/component-chosen.min.css') }}" rel="stylesheet"> -->


    </head>



    <body class="{% block body_class %}{% endblock %}">
        <div class="navbar navbar-dark bg-dark fixed-top navbar-expand-md" role="navigation">
            <div class="container">
                <button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/index">{% block branding %}PopJob{% endblock %}</a>
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Registration
                        </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="/user_registration">User Registration</a>
                        <div class="dropdown-divider"></div>
                    <a class="dropdown-item nav-item" href="/company_registration">Company Registration</a>
                        <li class="nav-item"><a href="/login" class="nav-link">Login</a>
                        </li>{% block extra_nav %}{% endblock %}</ul>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-lg-9">
                    <h1>{% block content_title %}{% endblock %}</h1>
                     <!-- di seguito il flashing dei messaggi -->
                    {% for category, message in get_flashed_messages(with_categories=true) %}
                        <div class="alert alert-dismissable alert-{{ category }}">
                            <button type="button" class="close" data-dismiss="alert">&times;</button>
                            {{ message }}
                        </div>
                    {% endfor %}

                    {% block content %}
                    {% endblock %}
                </div>
                <div class="col-lg-3">
                    {% block sidebar %}
                        <ul class="card bg-light card-body mb-3 nav flex-column">
                        {% if current_user.is_authenticated %}
                            <li class="nav-item"><a href="/profile" class="nav-link"><i class="fa fa-fw fa-user"></i>Profile</a>
                              <div class="dropdown-divider"></div>
                            <li class="nav-item"><a href="/validate" class="nav-link"><i class="fas fa-fw fa-check-square"></i></i>Validate Skills</a>
                              <div class="dropdown-divider"></div>
                            <li class="nav-item"><a href="/searchskills" class="nav-link"><i class="fas fa-fw fa-search"></i>Search for Skills</a>
                              <div class="dropdown-divider"></div>
                            <li class="nav-item"><a href="/profile/{{ current_user.id }}/cv" class="nav-link"><i class="fas fa-fw fa-file-export"></i></i>Export your CV</a>
                              <div class="dropdown-divider"></div>
                            <li class="nav-item"><a style="color: #dc3545" href="/logout" class="nav-link"><i class="fa fa-fw fa-power-off"></i>Logout</a>
                        {% endif %}
                    </ul>

                    {% endblock %}

                    <!-- here is the second sidebar showing the badges gained -->

                    {% block sidebar2 %}
                    Badge Conseguiti
                    <ul class="card bg-light card-body mb-3 nav flex-column">
                        {% for verificaflagskill in current_user.kskills %}
                            {% if verificaflagskill.status %}
                                <a href="#" class="badge badge-danger"> {{ verificaflagskill.skillName }}</a><br/>
                            {% endif %}
                        {% endfor %}

                    </ul>
                    {% endblock %}
                </div>
            </div>
            <div class="row">
                <hr />
                <footer>
                </footer>
            </div>
        </div>

<script type="text/javascript">
$('.form-control-chosen').chosen({
  allow_single_deselect: true,
  width: '100%'
});
$('.form-control-chosen-required').chosen({
  allow_single_deselect: false,
  width: '100%'
});
$('.form-control-chosen-search-threshold-100').chosen({
  allow_single_deselect: true,
  disable_search_threshold: 100,
  width: '100%'
});
$('.form-control-chosen-optgroup').chosen({
  width: '100%'
});

$(function() {
  $('[title="clickable_optgroup"]').addClass('chosen-container-optgroup-clickable');
});
$(document).on('click', '[title="clickable_optgroup"] .group-result', function() {
  var unselected = $(this).nextUntil('.group-result').not('.result-selected');
  if(unselected.length) {
    unselected.trigger('mouseup');
  } else {
    $(this).nextUntil('.group-result').each(function() {
      $('a.search-choice-close[data-option-array-index="' + $(this).data('option-array-index') + '"]').trigger('click');
    });
  }
});
  </script>

    </body>

</html>